<template>
  <div class="app-container">
    <el-form :inline="true" :model="search" label-width="60px" label-position="left">
      <el-form-item label="关键字">
        <el-input
          size="small"
          placeholder="请输入关键字"
          v-model="search.key"
          clearable>
        </el-input>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="search.orderType" placeholder="请选择" size="small">
          <el-option
            v-for="item in orderTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="类型">
        <el-select v-model="search.pType" placeholder="请选择" size="small">
          <el-option
            v-for="item in providersKeys"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="显示">
        <el-radio-group v-model="search.display" size="small">
          <el-radio-button label="table">表格</el-radio-button>
          <el-radio-button label="block">方块</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchData" size="small">查询</el-button>
      </el-form-item>
    </el-form>

    <div class="block" v-if="hasData">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageData.currentPage"
        :page-sizes="pagination.options"
        :page-size="pagination.size"
        layout="sizes, prev, pager, next"
        :total="pageData.total"
      >
      </el-pagination>
    </div>

    <el-row :gutter="10" v-if="search.display=='block'" v-loading="this.search.loading">
      <el-col v-for="(item, index) in pageData.items" :span="6" v-bind:key="item.id" style="margin-bottom: 10px">
        <el-card :body-style="{ padding: '0px' }">
          <img v-lazy="item.thumbnail" class="thumbnail" width="100%">
          <div style="padding: 14px;">
            <el-tooltip class="item" effect="dark" :content="item.title" placement="top-start">
              <span style="" class="fulltitle">{{item.title}}</span>
            </el-tooltip>

            <!--<span>{{formatSeconds(item.duration)}}</span>-->
            <div class="bottom clearfix">
              <time class="time">{{formatSeconds(item.duration)}}</time>
              <el-button type="text" class="button" @click="doCrawling(index,item)">分析</el-button>
              <el-button type="text" class="button"><a target="_blank" :href="item.webpageUrl">详情</a></el-button>
            </div>
          </div>
        </el-card>
        <!--<div class="grid-content bg-purple">-->
        <!--<img :src="item.thumbnail" width="100%" class="thumbnail"/>-->
        <!--</div>-->
      </el-col>
    </el-row>

    <el-table v-if="search.display=='table'"
              :data="pageData.items"
              style="width: 100%" v-loading="this.search.loading" empty-text="暂无数据">
      <el-table-column
        label="ID"
        prop="id"
        width="100"
      >
        <template slot-scope="scope">
          <a :href="scope.row.webpageUrl" target="_blank"><span style="color: #3a8ee6">{{scope.row.id}}</span></a>
        </template>
      </el-table-column>
      <el-table-column
        label="名称"
        width="400"
        prop="title"
        show-overflow-tooltip
      >
        <!--<template slot-scope="scope">-->
        <!--&lt;!&ndash;<i class="el-icon-time"></i>&ndash;&gt;-->
        <!--<span class="title">{{ scope.row.title }}</span>-->
        <!--</template>-->
      </el-table-column>
      <el-table-column
        label="观看"
        prop="viewCount"
        width="100"
        :formatter="numberFormatter"
      >
      </el-table-column>
      <el-table-column
        label="时长"
        prop="duration"
        width="100"
        :formatter="hourTimeFormatter"
      >
      </el-table-column>
      <!--<el-table-column-->
        <!--label="评级"-->
        <!--prop="rating"-->
      <!--&gt;-->
      <!--</el-table-column>-->
      <el-table-column
        label="预览"
        prop="id"
        width="100"
      >
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="right">
            <p><img :src="scope.row.thumbnail" width="120" height="120"/></p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">预览</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="操作" >
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="doCrawling(scope.$index, scope.row)">分析
          </el-button>
          <el-button
            size="mini"><a target="_blank" :href="scope.row.webpageUrl">详情</a>
          </el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
  import { message, pagable, utils } from '@/mixins/'
  import { mapGetters } from 'vuex'
  import { createJob } from '@/api/job.js'

  export default {
    mixins: [pagable, message, utils],
    data() {
      return {
        search: {
          key: '',
          orderType: 'nc',
          pType: 'pornhub',
          display: 'table',
          loading: false
        }
      }
    },
    methods: {
      doCrawling(index, row) {
        const loading = this.$loading({
          lock: true,
          text: '加载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        createJob({
          type: 'mediacrawler',
          url: row.webpageUrl,
          ptype: this.search.pType
        }).then((data) => {
          loading.close()
          this.showSuccess(`抓取任务创建成功${data.data}`)
        }).catch(() => {
          loading.close()
        })
      },
      searchData() {
        this.search.loading = true
        this.$store.dispatch('getSearchData', {
          offset: (this.pageData.currentPage - 1) * this.pagination.size,
          maxCount: this.pagination.size,
          keyWords: this.search.key,
          providerType: this.search.pType,
          orderType: this.search.orderType
        }).then((data) => {
          // this.pageData=data.data
          // this.pageData.currentPage = data.page+1
          this.pageData.items = data.items
          this.pageData.total = data.total
          this.search.loading = false
        })
      }
    },
    computed: {
      ...mapGetters([
        'providersKeys', 'orderTypes'
      ])
    }
  }
</script>

<style scoped lang="scss">
  .line {
    text-align: center;
  }

  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .fulltitle {
    overflow: hidden;
    display: block;
    max-height: 36px;
    height: 36px;
    text-overflow: ellipsis;
    width: 100%
  }

  .title {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  div .thumbnail {
    cursor: pointer;
    transition: all 0.6s;
  }

  div .thumbnail:hover {
    transform: scale(1.1);
  }

  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>

